<template>
  <view style="height: 100%">
    <scroll-view scroll-y class="viewport">
      <!-- 基本信息 -->
      <view class="goods">
        <!-- 商品主图 -->
        <view class="preview">
          <swiper @change="changeSwiper" circular class="banner-swiper">
            <swiper-item
              class="banner-swiper-item"
              v-for="(item, index) in goodsDetail.mainPictures"
              :key="index"
            >
              <image
                @click="tapImages(item)"
                class="banner-swiper-image"
                mode="aspectFill"
                :src="item"
              />
            </swiper-item>
          </swiper>
          <view class="indicator">
            <text class="current">{{ activeIndex + 1 }}</text>
            <text class="split">/</text>
            <text class="total">{{ arr }}</text>
          </view>
        </view>

        <!-- 商品简介 -->
        <view class="meta">
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{ goodsDetail.price }}</text>
          </view>
          <view class="name ellipsis">{{ goodsDetail.name }} </view>
          <view class="desc"> {{ goodsDetail.desc }} </view>
        </view>

        <!-- 操作面板 -->
        <view class="action">
          <view class="item arrow" @click="add(1)">
            <text class="label">选择</text>
            <text class="text ellipsis"> 请选择商品规格 </text>
          </view>
          <view class="item arrow" @click="showPopup('address')">
            <text class="label">送至</text>
            <text class="text ellipsis"> 请选择收获地址 </text>
          </view>
          <view class="item arrow" @click="showPopup('service')">
            <text class="label">服务</text>
            <text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>
          </view>
        </view>
      </view>

      <!-- 商品详情 -->
      <view class="detail panel">
        <view class="title">
          <text>详情</text>
        </view>
        <view class="content">
          <view class="properties">
            <!-- 属性详情 -->
            <view class="item" v-for="item in goodsDetail.details.properties">
              <text class="label">{{ item.name }}</text>
              <text class="value">{{ item.value }}</text>
            </view>
          </view>
          <!-- 图片详情 -->
          <image
            v-for="item in goodsDetail.details.pictures"
            :key="item"
            mode="widthFix"
            :src="item"
          ></image>
        </view>
      </view>

      <!-- 同类推荐 -->
      <view class="similar panel">
        <view class="title">
          <text>同类推荐</text>
        </view>
        <view class="content">
          <navigator
            v-for="item in goodsDetail.similarProducts"
            :key="item.id"
            class="goods"
            hover-class="none"
            :url="`/pages/goods/goods?id=${item.id}`"
          >
            <image class="image" mode="aspectFill" :src="item.picture"></image>
            <view class="name ellipsis">{{ item.name }}</view>
            <view class="price">
              <text class="symbol">¥</text>
              <text class="number">{{ item.price }}</text>
            </view>
          </navigator>
        </view>
      </view>
    </scroll-view>

    <!-- 用户操作 -->
    <view
      class="toolbar"
      :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }"
    >
      <view class="icons">
        <button class="icons-button">
          <text class="icon-heart"></text>收藏
        </button>
        <button class="icons-button" open-type="contact">
          <text class="icon-handset"></text>客服
        </button>
        <navigator
          class="icons-button"
          url="/pages/cart/cart1"
        >
          <text class="icon-cart"></text>购物车
        </navigator>
      </view>
      <view class="buttons">
        <view class="addcart" @click="add(2)"> 加入购物车 </view>
        <view class="buynow" @click="add(3)"> 立即购买 </view>
      </view>
    </view>
    <!-- uni-ui 弹出层 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <AddressPanel
        v-if="layer === 'address'"
        @close="this.$refs.popup.close()"
      />
      <ServicePanel
        v-if="layer === 'service'"
        @close="this.$refs.popup.close()"
      />
    </uni-popup>
    <!-- sku弹层 -->
    <vk-data-goods-sku-popup
      @add-cart="onAddCart"
      :mode="model"
       @buy-now="onBuyNow"
      :localdata="goodsInfo"
      v-model="showSku"
      add-cart-background-color="#FFA868"
      buy-now-background-color="#27BA9B"
      :actived-style="{
        color: '#27BA9B',
        borderColor: '#27BA9B',
        backgroundColor: '#E9F8F5',
      }"
    />
  </view>
</template>

<script>
import AddressPanel from "@/pages/goods/components/AddressPanel.vue";
import ServicePanel from "@/pages/goods/components/ServicePanel.vue";
import { getGoodsByIdAPI } from "@/services/goods.js";
import { postMemberCartAPI } from "@/services/cart.js";
import { mapState } from "vuex";
export default {
  components: {
    AddressPanel,
    ServicePanel,
  },
  computed: {
    arr() {
      return this.goodsDetail.mainPictures?.length || [];
    },
    ...mapState("system", ["safeAreaInsets"]),
  },
  data() {
    return {
      model: 1,
      //控制弹层显示或隐藏的变量
      showSku: false,
      //后端返回的数据
      goodsInfo: {},
      goodsDetail: {},
      activeIndex: 0,
      layer: "", // 记录打开弹层的类型
    };
  },
  onLoad(query) {
    console.log(query);
    this.getGoodsById(query.id);
  },
  methods: {
    //立即购买
    onBuyNow(ev){
 uni.navigateTo({ url: `/pagesOrder/create/create?skuId=${ev._id}&count=${ev.buy_num}` })
    },
    //购物车
    async onAddCart(e) {
      console.log(e);
      await postMemberCartAPI({ skuId: e._id, count: e.buy_num });
      //成功提示
      uni.showToast({
        title: "加入购物车成功",
        icon: "success",
      });
      //关闭弹层
      this.showSku = false;
    },
    add(model) {
      this.showSku = true;
      this.model = model;
      this.goodsInfo = {
        _id: this.goodsDetail.id,
        name: this.goodsDetail.name,
        good_thumb: this.goodsDetail.mainPictures[0],
        sku_list: this.goodsDetail.skus.map((item) => {
          return {
            _id: item.id,
            goods_id: this.goodsDetail.id,
            goods_name: this.goodsDetail.name,
            image: item.picture,
            price: item.price * 100,
            sku_name_arr: item.specs.map((item) => item.valueName),
            stock: item.inventory,
          };
        }),
        spec_list: this.goodsDetail.specs.map((item) => {
          return {
            list: item.values.map((item) => ({ name: item.name })),
            name: item.name,
          };
        }),
      };
    },
    showPopup(type) {
      this.layer = type;
      this.$refs.popup.open("bottom");
    },
    //查看大图
    tapImages(url) {
      uni.previewImage({
        urls: this.goodsDetail.mainPictures,
        current: url,
      });
    },
    changeSwiper(ev) {
      this.activeIndex = ev.detail.current;
    },
    async getGoodsById(id) {
      const res = await getGoodsByIdAPI(id);
      this.goodsDetail = res.result;
      console.log(res);
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
uni-image {
  width: 100%;
  font-size: 0px;

  img {
    font-size: 0;
  }
}

.viewport {
  background-color: #f4f4f4;
  height: 92%;
}

.panel {
  margin-top: 20rpx;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90rpx;
    line-height: 1;
    padding: 30rpx 60rpx 30rpx 6rpx;
    position: relative;
    text {
      padding-left: 10rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      border-left: 4rpx solid #27ba9b;
    }
    navigator {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.arrow {
  &::after {
    position: absolute;
    top: 50%;
    right: 30rpx;
    content: "\e6c2";
    color: #ccc;
    font-family: "erabbit" !important;
    font-size: 32rpx;
    transform: translateY(-50%);
  }
}

/* 商品信息 */
.goods {
  background-color: #fff;
  .preview {
    height: 750rpx;
    position: relative;
    .banner-swiper,
    .banner-swiper-item,
    .banner-swiper-image {
      width: 100%;
      height: 100%;
    }
    .indicator {
      height: 40rpx;
      padding: 0 24rpx;
      line-height: 40rpx;
      border-radius: 30rpx;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
      .current {
        font-size: 26rpx;
      }
      .split {
        font-size: 24rpx;
        margin: 0 1rpx 0 2rpx;
      }
      .total {
        font-size: 24rpx;
      }
    }
  }
  .meta {
    position: relative;
    border-bottom: 1rpx solid #eaeaea;
    .price {
      height: 130rpx;
      padding: 25rpx 30rpx 0;
      color: #fff;
      font-size: 34rpx;
      box-sizing: border-box;
      background-color: #35c8a9;
    }
    .number {
      font-size: 56rpx;
    }
    .brand {
      width: 160rpx;
      height: 80rpx;
      overflow: hidden;
      position: absolute;
      top: 26rpx;
      right: 30rpx;
    }
    .name {
      max-height: 88rpx;
      line-height: 1.4;
      margin: 20rpx;
      font-size: 32rpx;
      color: #333;
    }
    .desc {
      line-height: 1;
      padding: 0 20rpx 30rpx;
      font-size: 24rpx;
      color: #cf4444;
    }
  }
  .action {
    padding-left: 20rpx;
    .item {
      height: 90rpx;
      padding-right: 60rpx;
      border-bottom: 1rpx solid #eaeaea;
      font-size: 26rpx;
      color: #333;
      position: relative;
      display: flex;
      align-items: center;
      &:last-child {
        border-bottom: 0 none;
      }
    }
    .label {
      width: 60rpx;
      color: #898b94;
      margin: 0 16rpx 0 10rpx;
    }
    .text {
      flex: 1;
      -webkit-line-clamp: 1;
    }
  }
}

/* 商品详情 */
.detail {
  padding-left: 20rpx;
  .content {
    margin-left: -20rpx;
    display: flex;
    flex-direction: column;

    image {
      width: 100%;
    }
  }
  .properties {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    .item {
      display: flex;
      line-height: 2;
      padding: 10rpx;
      font-size: 26rpx;
      color: #333;
      border-bottom: 1rpx dashed #ccc;
    }
    .label {
      width: 200rpx;
    }
    .value {
      flex: 1;
    }
  }
}

/* 同类推荐 */
.similar {
  padding-left: 20rpx;
  .content {
    padding: 0 20rpx 20rpx;
    margin-left: -20rpx;
    background-color: #f4f4f4;
    overflow: hidden;
    navigator {
      width: 305rpx;
      padding: 24rpx 20rpx 20rpx;
      margin: 20rpx 20rpx 0 0;
      border-radius: 10rpx;
      background-color: #fff;
      float: left;
    }
    .image {
      height: 260rpx;
      width: 100%;
    }
    .name {
      height: 80rpx;
      margin: 10rpx 0;
      font-size: 26rpx;
      color: #262626;
    }
    .price {
      line-height: 1;
      font-size: 20rpx;
      color: #cf4444;
    }
    .number {
      font-size: 26rpx;
      margin-left: 2rpx;
    }
  }
  navigator {
    &:nth-child(even) {
      margin-right: 0;
    }
  }
}

/* 底部工具栏 */
.toolbar {
  background-color: #fff;
  height: 100rpx;
  padding: 0 20rpx;
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
  .buttons {
    display: flex;
    & > view {
      width: 220rpx;
      text-align: center;
      line-height: 72rpx;
      font-size: 26rpx;
      color: #fff;
      border-radius: 72rpx;
    }
    .addcart {
      background-color: #ffa868;
    }
    .buynow {
      background-color: #27ba9b;
      margin-left: 20rpx;
    }
  }
  .icons {
    padding-right: 10rpx;
    display: flex;
    align-items: center;
    flex: 1;
    .icons-button {
      flex: 1;
      text-align: center;
      line-height: 1.4;
      padding: 0;
      margin: 0;
      border-radius: 0;
      font-size: 20rpx;
      color: #333;
      background-color: #fff;
    }
    text {
      display: block;
      font-size: 34rpx;
    }
  }
}
</style>
